<template>
  <div class="item2-container">
    <div class="tabs">
      <div :class="['tab-item', {'is-active': showIndex === 1}]" @click="showItem1">轻音乐</div>
      <div :class="['tab-item', {'is-active': showIndex === 2}]" @click="showItem2">专题宣传</div>
      <div :class="['tab-item', {'is-active': showIndex === 3}]" @click="showItem3">动感音乐</div>
      <div :class="['tab-item', {'is-active': showIndex === 4}]" @click="showItem4">本地音乐</div>
      <div class="active-bar"></div>
    </div>
    <EasyScrollbar :barOption="colorSizeOption">
      <div class="item-list" id="wrapper">
        <div
          :class="['item', {'isPlay': item.isPlay}]"
          :style="{'backgroundColor': index % 2 === 1 ? '#3e2e50':'transparent'}"
          v-for="(item, index) in datas"
          @click="play(index)"
          :key="index">
          <div class="item-name">{{item.name}}</div>
          <div class="play-icon"></div>
        </div>
      </div>
    </EasyScrollbar>
    <div class="file-upload">
      <button>上传音乐</button>
    </div>
  </div>
</template>

<style lang="less">
  @import '../../../../assets//less/file2';
</style>

<script>
export default {
  data () {
    return {
      showIndex: 1,
      active1BarX: 0,
      active2BarX: 0,
      active3BarX: 0,
      active4BarX: 0,
      datas: [{
        name: '景区概况1',
        isPlay: true
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }, {
        name: '景区概况2',
        isPlay: false
      }],
      colorSizeOption: {
        barColor: '#b36fff',
        barWidth: 3,
        railColor: '#15032a'
      }
    }
  },
  mounted () {
    this.getBarMoveDistance()
  },
  methods: {
    showItem1 () {
      this.showIndex = 1
      document.querySelector('.active-bar').style.transform = `translateX(${this.active1BarX}px)`
    },
    showItem2 () {
      this.showIndex = 2
      document.querySelector('.active-bar').style.transform = `translateX(${this.active2BarX}px)`
    },
    showItem3 () {
      this.showIndex = 3
      document.querySelector('.active-bar').style.transform = `translateX(${this.active3BarX}px)`
    },
    showItem4 () {
      this.showIndex = 4
      document.querySelector('.active-bar').style.transform = `translateX(${this.active4BarX}px)`
    },
    getBarMoveDistance () {
      let tabsWidth = document.querySelector('.tabs').offsetWidth
      let distance = (tabsWidth - 400) / 3
      this.active1BarX = 0
      this.active2BarX = distance + 100
      this.active3BarX = this.active2BarX + distance + 100
      this.active4BarX = this.active3BarX + distance + 100
    },
    play (val) {
      this.datas.forEach(item => {
        item.isPlay = false
      })
      this.datas[val].isPlay = !this.datas[val].isPlay
    }
  }
}
</script>
